<div class="layui-body-header show layui-form" lay-filter="header-breadcrumb-form">
    <span class="layui-body-header-title" p-bind="text:{{headerTitle}}"></span>
    <span class="layui-breadcrumb pull-right" id="header-breadcrumb">
        <span style="margin-right: 8px;">
           <input type="checkbox" id="ONLINE_STATUS" disabled  name="CS_STATUS" lay-filter="CS_STATUS" lay-skin="switch"
                  lay-text="就绪|"/>
        </span>
        <span style="display:none;width: 62px;float: right">
             <input type="checkbox" id="WORK_STATUS" name="WORK_STATUS" lay-filter="WORK_STATUS" lay-skin="switch"
                    lay-text="示忙|示闲"/>
        </span>

    </span>
</div>
<style type="text/css">
    .layui-body {
        margin: 0 !important;
        background-color: #FEFEFE !important;
    }

    .layui-body-header .layui-form-switch {
        margin-top: 0px;
    }
</style>
<script type="text/javascript">
    layui.use(['tools'], function () {
        var form = layui.form;
        var tools = layui.tools;
        var $csStatus = $("#ONLINE_STATUS");
        var $workStatus = $("#WORK_STATUS");
        var WORK_STATUS =0 ;
        var $headerBreadcrumb = $("#header-breadcrumb");
        var methods = {
            doStatusBarHide: function () {
                $headerBreadcrumb.css("visibility", "hide");
            },
            doStatusBarShow: function () {
                $headerBreadcrumb.css("visibility", "visible");
            },
            doWorkStatusBarShow: function () {
                $workStatus.parent().show();
            },
            doWorkStatusBarHide: function () {
                $workStatus.parent().hide();
            },
            doRender: function () {
                form.render('checkbox', 'header-breadcrumb-form');
            },
            doUpdate: function (params) {
                tools.postJSON({
                    url: '/plm/api/im/csUser/saveOrUpdate',
                    params: params
                }).done(function (res) {
                    if (res.code != '0') {
                        layer.msg('操作错误,请稍后再试');
                    }
                })
            },
            displayEvent: function () {
                tools.getJSON({
                    url: '/plm/api/im/csUser/get'
                }).done(function (res) {
                    //debugger;
                    if (res.code == 0) {
                        var data = res.data;
                        if (data && data.imUserType == 2) {
                            GL_IS_CS = 1;
                            WORK_STATUS = data.workStatus;
                            methods.doStatusBarShow();
                            //设置选中
                            methods.doChecked(WORK_STATUS);
                            setInterval(function () {
                                methods.doChecked(WORK_STATUS);
                            }, 3000)
                        } else {
                            methods.doStatusBarHide();
                        }
                    } else {
                        methods.doStatusBarHide();
                    }
                }).fail(function () {
                    methods.doStatusBarHide();
                })

            },
            doChecked: function (workStatus) {
                var onlineStatus = tools.getTempData('onlineStatus') || {status:0,t:0};
                //在线状态大约60s变动一次
                if (onlineStatus.status != 1 || (onlineStatus.status == 1 && new Date().getTime()-onlineStatus.t > 60 * 1000)) {
                    $csStatus.removeAttr('checked');
                    methods.doWorkStatusBarHide();
                } else {
                    $csStatus.attr('checked', 'checked');
                    methods.doWorkStatusBarShow();
                }
                if (1==workStatus ) {
                    $workStatus.attr('checked', 'checked');
                } else {
                    $workStatus.removeAttr('checked');
                }
                methods.doRender();
            },
            switchEvent: function () {
                form.on('switch(CS_STATUS)', function (obj) {
                    return false;
                });
                form.on('switch(WORK_STATUS)', function (obj) {
                    var ck = obj.elem.checked;
                    var params = {workStatus: ck ? 1 : 0};
                    methods.doUpdate(params);
                });
            }
        }
        methods.switchEvent();
        methods.displayEvent();
    })
</script>